<template>
<div>
  <Title></Title>
  <div style="display: flex;justify-content: center;align-items: center">
    <div style="width: 80%;display: inline-block;position: relative;margin-top: 20px;margin-bottom: 20px">
      <div v-for="(item, key) in tools" style="display: inline-block;width: 20%;padding: 10px">
        <img
          style="width:100%;height :100% ;left: 0"
          :src="item.cover?item.cover:'../../assets/img/videos.png'"
          :alt="item.name"
          @click="operateVideo(item)"
        />
      </div>
    </div>
    <el-dialog :visible.sync="isShow" :before-close="handleClose">
      <video
        id="videoPlayer"
        style="width: 100%;padding: 20px;box-sizing: border-box"
        ref="myVideo"
        controls
        :src="video_url"
        controlslist="nodownload"
        class="video-box"
      />
    </el-dialog>
  </div>
</div>
</template>

<script>
import Title from "../../components/title.vue";
import {adClickApi, getAdsApi} from "../../api/http";

export default {
  name: "Video",
  components: {Title},
  data() {
    return {
      tools:["1","1","1","1","1","1","1","1","1","1"],
      isShow: false,
      video_url: ''
    }
  },
  async created() {
    await this.getAdsFun()
  },
  methods: {
    async getAdsFun () {
      let res = await getAdsApi();
      console.log(res);
      if(res.data.code===200){
        this.tools = res.data.data
      } else {
        this.$message(res.data.msg)
      }
    },
    handleClose(){
      this.isShow = false
      this.$refs.myVideo.pause();
    },
    operateVideo(item) {
      adClickApi({id:item.id})
      if (!item.url) {
        this.$message("视频错误")
        return false;
      }
      this.video_url = item.url
      this.isShow = true
      setTimeout(()=>{
        this.$refs.myVideo.play();
      },1000)

    }
  }
}
</script>

<style scoped>

</style>
